Canvas

height

The height of the Workflow's container. Use this to design your workflow UI.

const height = workflowApi.canvas.height;
				

width

The width of the Workflow's container. Use this to design your workflow UI.

const width = workflowApi.canvas.width;
				

onSizeChanged

This method will be triggered from the Workflow infrastructure when the window dimensions was changed. You should implement this function if you need to change and fit DOM Elements based on the window's dimensions .

workflowApi.canvas.onSizeChanged = (size) => {
						console.log("You can change your view to new size according to the canvas new size");
						};
				

Parameters

• newSize:{ height: number; width: number }

  • height:number

  • width:number

Returns void

addExternalStyleSheets

Set external style sheets for the styling of the workflow. Used to add entire custom style sheet documents.

workflowApi.canvas.addExternalStyleSheets(['https://kendo.cdn.telerik.com/2021.1.119/styles/kendo.default-v2.min.css']);
				

Parameters

• paths:string[]

  Each string represent the address for the style sheet document.

Returns void

closeWindow

this function closes the workflow window. You should use this function when you have a process that requires the window to be closed.

const removeThreadButton = document.createElement("button");
						removeThreadButton.addEventListener('click', () => {
						workflowApi.currentThread.removeThread().then(() => {
						workflowApi.canvas.closeWindow();
						});
						});
				

Returns void

hideSpinner

This function hides the spinner animation in the UI.

const currentEntry = workflowApi.currentThread.entries[0];
						workflowApi.canvas.showSpinner();
						currentEntry.save().then(() => {
						console.log("The Entry has been saved");
						}).finally(() =>  {
						workflowApi.canvas.hideSpinner();
						});
				

Returns void

refresh

Refreshes the Workflow's window. The refresh function will retrigger all the flow's events and refetch the Workflow's data. Use this function when you need to retrieve the latest data or when you want to recall the flow's triggered events.

const currentEntry = workflowApi.currentThread.entries[0];
						workflowApi.canvas.showSpinner();
						currentEntry.save().then(() => {
						console.log("The Entry has been saved");
						}).finally(() =>  {
						workflowApi.canvas.hideSpinner();
						workflowApi.canvas.refresh();
						});
				

Returns void

showSpinner

The function displays the UI spinner animation in the middle of the window and blocks all other user access to the UI elements. Call it when you have an asynchronous process and you want to force the user to wait.

const currentEntry = workflowApi.currentThread.entries[0];
						workflowApi.canvas.showSpinner();
						currentEntry.save().then(() => {
						console.log("The Entry has been saved");
						}).finally(() =>  {
						workflowApi.canvas.hideSpinner();
						});
				

Returns void